@import '../../res/theme/xxhz.scss';



.shopcar-root {
  .head-bg {
    position: sticky;
    z-index: 999999;
    left: 0;
    top: 0;
    width: 100%;
  }

  .shop-top {
    .shop-top-btn {
      color: $color-font-secondry;
      font-size: 26px;
      text-align: center;
      height: 30PX !important;
      line-height: 30PX !important;
    }

    .shop-top-btn-weapp {
      height: 82px !important;
      line-height: 82px !important;
    }

    .bold {
      font-weight: bold;
      color: $color-font-default;
    }
  }

  .shop-toph5 {
    height: 50px;
    padding: 12px 2px;

    .shop-top-btn {
      height: 30PX;
      line-height: 30PX;
      font-size: 14PX;
    }
  }

  .shopCarBox {
    width: 100%;

    .shopCarlist {
      margin: 0px 24px 20px 22px;

      .goodsum {
        width: 100%;
        background: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        overflow: hidden;

        .bottom_check {
          display: flex;
          align-items: center;
          padding-left: 30px;
        }

        .sumbox {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          width: 100%;
          margin-top: 48px;
          border-top: 1px solid #f0f0f0;
          border-bottom: 1px solid #f0f0f0;
          background: #fdfdfd;

          .left {
            line-height: 98px;
            font-size: 24px;
            color: #333333;
            padding-right: 30px;

            text {
              color: #ca0000;
            }
          }

          .right {
            background: #ca0000;
            line-height: 98px;
            width: 186px;
            color: #fff;
            font-size: 30px;
            text-align: center;
          }
        }
      }

      .bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 9998;
        box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.01);
        padding-bottom: env(safe-area-inset-bottom);

        .sumbox {
          width: auto;
          margin-top: 0;
          border: none;
        }

        .bottom_check {
          font-size: 26px;
          color: #333;
          height: 98px;
        }
      }

      .shopCarlist-box {
        background: #fff;
        overflow: hidden;
        border-radius: 20px;

        .at-swipe-action {
          width: 100% !important;
        }

        .shopCarBox-title {
          width: 690px;
          margin: 0 auto;
          height: 90px;
          line-height: 90px;
          display: flex;
          align-items: baseline;

          .shopCarBox-title-text {
            font-size: 30px;
            color: $color-font-primary;
            padding-left: 20px

          }
        }

        .good-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 30px;

          .num {
            font-size: 20px;
            color: #333;
            padding-left: 10px
          }

          .radio-box {
            display: flex;
            align-items: center;
          }

          .good-item-box {
            display: flex;
            width: 100%;

            &.disabled {
              background: none;
            }

            .title-box {
              margin-left: 20px;
              position: relative;
              width: calc(100% - 100Px);

              .title {
                color: #000 !important;
                font-size: 24px;
                -webkit-line-clamp: 1;
                /*! autoprefixer: ignore next */
                -webkit-box-orient: vertical;
                /* autoprefixer: on */
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
              }

              .label {
                display: inline-block;
                margin: 15px 0;
                background: #f4f4f4;
                border-radius: 8px;
                line-height: 36px;
                font-size: 22px;
                color: #666;
                padding: 0 10px;

                .taro-text, text {
                  display: inline-block;
                  max-width: 200px;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;
                  vertical-align: middle;
                  line-height: 1.2;
                }

                at-icon {
                  padding-left: 20px;
                  vertical-align: middle;
                }
              }

              .price-box {
                position: absolute;
                bottom: 0;
                left: 0;
                line-height: 1;
                width: 400px;
                padding-left: 20px;

                .price-box-left {
                  float: left;
                  margin-top: 12px;
                }

                at-input-number {
                  float: right;
                }

                .symbol {
                  font-size: 26px;
                  color: #ca0000
                }

                .price {
                  font-size: 34px;
                  color: #ca0000
                }
              }

              .category-labels {
                display: flex;
                align-items: center;
                margin-bottom: 10px;
                flex-wrap: wrap;
                min-height: 80px;

                .category-label {
                  margin-top: 8px;
                  white-space: nowrap;
                  margin-right: 8px;
                  border-radius: 26px;
                  color: #ff601b;
                  padding: 6px 10px;
                  font-size: 18px;
                  text-align: center;
                  border: 1px solid #ff601b;
                }

                .category-label:last-child {
                  margin-right: 0;
                }
              }

              .price {
                .price {
                  color: #f93d01;
                  font-size: 20px;
                  font-family: Avenir;
                }

                .true-price {
                  color: #f93d01;
                  font-size: 36px;
                  font-weight: bolder;
                  font-family: Avenir;
                  margin-right: 5px;
                  display: inline;

                  .symbol {
                    font-size: 20px;
                  }
                }
              }
            }

            .img-box {
              position: relative;
              width: 100Px;
              height: 100Px;
              overflow: hidden;
              border-radius: 8px;

              .imgTopright {
                background: rgba(0, 0, 0, .7);
                position: absolute;
                left: 0;
                bottom: 0;
                width: 100%;
                line-height: 60px;
                text-align: center;
                font-size: 24px;
                color: #fff;
              }

              .imgTop {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 10;
                background: rgba(255, 255, 255, .45);
                display: flex;
                justify-content: center;
                align-items: center;

                image, .taro-img {
                  width: 87px;
                  height: 87px;
                }
              }

              .img {
                width: 100%;
                height: 100%;
              }
            }
          }

          .disabled {
            .title-box {
              .title {
                color: #888888;
                font-size: 28px;
              }

              .label {
                background: #f8f8f8;
                color: #bbb;
              }

              .price-box {
                .symbol {
                  color: #666666
                }

                .price {
                  color: #666666
                }
              }
            }
          }
        }

        .good-item-edit {
          padding-left: 2px !important;
          justify-content: flex-start !important;

          .good-item-box {
            display: flex;
            margin-left: 10px !important;
          }
        }

        .good-item-edit-weapp {
          padding-left: 10px !important;
          justify-content: flex-start !important;

          .good-item-box {
            display: flex;
            margin-left: 10px !important;
          }
        }
      }

      .good-item-dome:last-child {
        margin-bottom: 0;
      }
    }
  }

  .listNull {
    width: 100%;
    height: 100%;
    text-align: center;
    overflow: hidden;

    image, .taro-img {
      width: 295px;
      height: 295px;
      margin: 86px auto 35px;
    }

    .text {
      font-size: 24px;
      color: #666;

      text {
        color: #f58240;
      }
    }

  }

  radio {
    transform: scale(0.8);
  }

  .car-num-small {
    border: none !important;
    border-radius: 0;

    &.h5 {
      float: right;

      .at-input-number__input {
        height: initial;
        border: none;
      }
    }

  }

  .car-num-small .at-input-number__btn {
    color: #5f5f5f;
    padding: 8px 12px;
    font-size: 20px;
  }

  .car-num-small .at-input-number__btn.at-input-number--disabled {
    color: #f1f1f1;
  }

  .car-num-small .at-input-number__btn-subtract, .car-num-small .at-input-number__btn-add {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    height: 26px;
  }

  .car-num-small.at-input-number__input, .at-input-number input {
    border-left: none;
    border-right: none;
    background: #f2f2f2;
    color: #262626;
  }

  .car-num-small input,
  .car-num-small .at-input-number__input {
    padding: 0;
    font-size: 20px;
    width: 70px;
    height: 26px;
    display: block;
  }

  .car-num-small2 {
    border: none;
    border-radius: 0;
  }

  .car-num-small2 .at-input-number__btn {
    background: #f2f2f2;
    color: #5f5f5f;
    padding: 8px 12px;
    font-size: 20px;
  }

  .car-num-small2 .at-input-number__btn.at-input-number--disabled {
    background: #fff;
    color: #f1f1f1;
  }

  .car-num-small2 .at-input-number__btn-subtract, .car-num-small2 .at-input-number__btn-add {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    height: 26px;
  }

  .car-num-small2.at-input-number__input, .at-input-number input {
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
  }

  .car-num-small2 input,
  .car-num-small2 .at-input-number__input {
    padding: 0;
    font-size: 20px;
    width: 70px;
    height: 26px;
    display: block;
  }

  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
  }
}

.shopcar-root {
  .search-top {
    position: relative;

    .at-search-bar__placeholder-wrap {
      justify-content: flex-start;
    }

    .shop-top {
      z-index: 900;
      width: 15%;
      position: fixed;
      top: 0;
      right: 0;
      height: 30PX;
      background-color: #fff;
    }

    .shop-top-weapp {
      height: 82px;
    }
  }

  .at-search-bar--fixed {
    width: 85%;
  }
}

.regional-category {

  overflow-x: hidden;

  .regional-category-header {
    display: flex;

    .regional-category-header-item {
      width: 23.5%;
      flex: 0 0 23.5%;
      text-align: center;
      position: relative;

      .regional-category-header-item-top {
        font-size: 28px;
        margin-bottom: 10px;
      }

      .regional-category-header-item-bottom {
        font-size: 24px;
        color: #333;
      }

      .active {
        font-weight: bold;
      }
    }

    .regional-category-header-item::after {
      height: 55px;
      width: 2px;
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      display: inline-block;
      content: '';
      background-color: #dbdbdb;
    }

    .regional-category-header-item:last-child::after {
      display: none;
    }
  }

  .regional-category-select {
    display: flex;

    .regional-category-select-item {
      width: 22.5%;
      flex: 0 0 22.5%;
      text-align: center;
      position: relative;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      height: 25px;
      line-height: 25px;
      font-size: 24px;
      background-color: #fff;
      margin-right: 10px;
      padding: 15px 0;
    }

    .active1 {
      background-color: $mainColor;
      color: #fff;
    }
  }

  .regional-category-nav {
    display: flex;
    justify-content: space-between;
    margin: 36px 9px 36px;

    Image {
      width: 64px;
      height: 64px;
    }

    .regional-category-nav-weapp {
      display: flex;
    }

    .regional-category-nav-item {
      align-items: center;
      justify-content: center;
      display: flex;
      flex-direction: column;
      position: relative;
      color: #666;
      -webkit-flex-shrink: 0;
      -ms-flex-negative: 0;
      flex-shrink: 0;

      .img {
        width: 84px;
        height: 84px;

        img {
          object-fit: cover;
        }
      }

      .regional-category-nav-item-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: #333;
        display: flex;
        font-size: 28px;
        text-align: center;
        width: auto !important;
        padding: 0 20px;
        display: block;
        margin-top: 0 !important;
      }

      .active {
        color: #ffa000;
      }
    }
  }

  .regional-category-nav-weapp {
    margin: 0 !important;
  }

  .scroll-view {
    margin-top: 84px;
    overflow-x: auto;
    padding: 0 !important;
    z-index: 900;
  }

  .scroll-view-weapp {
    margin: 120px 9px 36px !important;
  }
}

.at-swipe-action__option {
  height: 98% !important;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
